<template>
    <div id="pressureDate" class="pressureDate">
		<div class="content_wrap">
			<!-- <el-breadcrumb separator="/">
				<el-breadcrumb-item @click="toggleTopTab(1)">压力监测</el-breadcrumb-item>
				<el-breadcrumb-item><a href="/">压力数据</a></el-breadcrumb-item>
			</el-breadcrumb> -->
			<div class="opt_wrap">
				<!-- 新增、删除、导入、导出 -->
				<!-- <el-button type="primary" icon="el-icon-edit">新增</el-button>
				<el-button type="primary" icon="el-icon-edit">删除</el-button>
				<el-button type="primary" icon="el-icon-edit">导入</el-button> -->
				<el-button type="primary" icon="el-icon-edit">导出</el-button>
			</div>
			<el-table
				:data="tableData"
				style="width: 100%">
				<el-table-column
				type="selection"
				width="55" >
				</el-table-column>
				<el-table-column
					label="序号"
					prop="index"
					width="80">
				</el-table-column>
				<el-table-column
					prop="siteName"
					label="站点名称"
					width="180">
				</el-table-column>
				<el-table-column
					prop="uploadTime"
					label="上传时间">
				</el-table-column>
				<el-table-column
					prop="pressure"
					label="压力">
				</el-table-column>
				<el-table-column
					prop="momentAccumulative"
					label="瞬时流量">
				</el-table-column>
				<el-table-column
					prop="todayAccumulative"
					label="今日流量">
				</el-table-column>
				<el-table-column
					prop="lastAccumulative"
					label="昨日流量">
				</el-table-column>
				<el-table-column
					prop="actualAccumulative"
					label="实际累计">
				</el-table-column>
				<el-table-column
					prop="reverseAccumulative"
					label="反向累计">
				</el-table-column>
				<el-table-column
					prop="cellVoltage"
					label="电池电压">
				</el-table-column>
			</el-table>
				<div class="block">
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage4"
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="total, sizes, prev, pager, next, jumper"
					:total="400">
					</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
// import PanelWrap from '@/components/PanelWrap'
export default {
	name:'pressureDate',
	data(){
		return {
			pageSize:20,
			pageCount:100,
			currentPage:1,
			currentPage4:10,
			tableData: [{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          },{
				index:1,
				uploadTime: '2016-05-02',
				siteName: '站点1',
				pressure:'0.21',
				momentAccumulative:'100',
				todayAccumulative:'100',
				lastAccumulative:'100',
				actualAccumulative:'100',
				reverseAccumulative:'100',
				cellVoltage:'1000'
          }]
		}
	},
	components:{
		// PanelWrap
	},
	methods:{
		handleSizeChange(){

		},
		handleCurrentChange9(){

		}
	}
}
</script>

<style lang="less" scoped>
.pressureDate{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
			// top: 102px;
			box-sizing: border-box;
			padding: 135px 25px 30px 25px;
			.el-table, .el-table__expanded-cell{
				background-color: transparent;
			}
			.el-table{
				margin-top: 10px;
				tr{
					height: 56px;
					background:transparent;
					color: rgba(255, 255, 255, 0.65);
				}
				.el-table th.el-table__cell{
					background-color: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
				}	
				th.el-table__cell{
					background: rgba(11, 117, 216, 0.1);;
				}
				td.el-table__cell, th.el-table__cell.is-leaf{
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);;
				}
			}
 
			.el-table::before{
				display: none;
			}
			.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
					background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
					color: rgba(2, 154, 250, 1);
				}
				
			.el-button--primary{
				color: rgba(255, 255, 255, 0.65);
				background: transparent;
				border-color: #023557;
			}
			.el-checkbox__inner{
				background: transparent;
				width: 15px;
				height: 15px;
				border: 1px solid rgba(255, 255, 255, 0.5);
			}

			.block{
				margin-top: 10px;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				.el-input__inner{
					border: 1px solid rgba(255, 255, 255, 0.3);
					background: transparent;
				}
				.el-pager li{
					background: transparent;
				}
				.el-pagination .btn-next, .el-pagination .btn-prev{
					background: transparent;
				}
				span,input,i,li{
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>